This Is a Testflight

Completely useless presentation

anarinsk

2022-09-06

Disclaimer

This is a testflight. In this slide, I will test some (nice) features of reveal.js for my personal use. The features come mostly from Quarto-Revealjs.

🐈🐈🐈

  • 이 PT는 장난질입니다. 내용은 무시하고 기능만 봐주세요.
  • Quarto + reveal.js에서 개인적으로 필요한 요소들을 구현했습니다.

In the Morning

Getting up

  • Turn off alarm
  • Get out of bed
  • (continued in the next slide… Hit proper key to continue)
  • Go to the bathroom
  • Make breakfast

해장술은 필요한가?

  • 필요하다면 주종은?
  • 해장술에 어울리는 안주는?
  • 국물이 필요한가?

p의 텍스트가 ul, ol의 텍스트와 달라 보이나요?

Breakfast

  • Eat eggs
  • Drink coffee

In the evening

Dinner

  • Eat spaghetti
  • Drink wine

Going to sleep

  • Get in bed
  • Count sheep

How to add Footnote

Footnote

  • Green 1
  • Brown
  • Purple
  • 한글과 조화롭나요?

Testing Increamental

Incremental activated

  • Eat spaghetti
  • Drink wine

Inscremental deactivated

  • Eat spaghetti
  • Drink wine

Testing Pause

Slide with a pause

content before the pause

content after the pause

Multicolumn

Example

Left column

  • This is left column.
  • 40% is allocated.

Right column

  • 이쪽은 오른쪽 열입니다.
  • 60%가 할당되어 있지요!

Cotents Overflow

Page w/o {.smaller}

  • This is normal
  • 이게 보통 크기

Page w {.smaller}

  • This is smaller
  • 이게 작은 크기

스크롤이 가능한 슬라이드

  • Bullet number 1
  • Bullet number 2
  • Bullet number 3
  • Bullet number 4
  • Bullet number 5
  • Bullet number 6
  • Bullet number 7
  • 총알 넘버 8
  • 총알 넘버 9
  • 총알 넘버 10
  • 총알 넘버 11
  • 총알 넘버 12

How to apply fonts

sample css

  • .qmd 파일과 같은 위치에 .css 파일을 두고, 문서 앞의 YAML에서 해당 파일을 로드하면 된다.
  • 폰트를 로딩하고 적용하는 방법은 대체로 비슷하다. 이 문서에 적용된 format.scss를 보자.
    • 1-3 번 라인이 폰트를 입력하는 명령이다.
    • 나머지 아래는 css 양식, 즉 PT의 표시 항목 별로 폰트, 크기 및 특성을 지정한다.
@import url("https://cdn.jsdelivr.net/gh/wan2land/d2coding/d2coding-ligature-subset.css");
@import url("https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/static/woff2/SUIT.css");
@import url("https://cdn.jsdelivr.net/gh/sunn-us/SUITE/fonts/static/woff2/SUITE.css");

/*-- scss:rules --*/
.reveal h1, 
.reveal h2, 
.reveal h3, 
.reveal h4, 
.reveal h5, 
.reveal h6 {
  font-family: 'SUITE', sans-serif !important;
  /* text-shadow: -1px -1px 0 rgba(0, 0, 0, .3); */
  font-weight: 750;
}

.reveal section p {
    font-family: 'SUIT', sans-serif !important;
    font-size: 90%;
}

.reveal section pre code {
  font-family: 'D2Coding', monospace !important;
  font-size: 90%;
}

.reveal ul, 
.reveal li, 
.reveal ol {
    font-family: 'SUIT', sans-serif !important;
    font-size: 95%;
}

.reveal code{
  font-family: 'D2Coding', monospace !important;
  font-size: 95%;
}

Tabsets

탭셋을 적용해보자.

Content for Tab A

봉준호가 깐느봉일까요?

Content for Tab B

박찬욱이 깐느박일까요?

\(\rm\LaTeX\) 테스트

수식 표현을 테스트합니다.

\[ \begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned} \]

\[    \begin{bmatrix}                 1 & x & 0 \\                 0 & 1 & -1         \end{bmatrix}\begin{bmatrix}                 1  \\                 y  \\                 1         \end{bmatrix}         =\begin{bmatrix}                 1+xy  \\                 y-1         \end{bmatrix}. \]

인라인 수식은 잘 들어갑니꽈~ \(y_i = \alpha + \beta x_i\)는 회귀방정식이란 말이요~

수식 표현을 테스트합니다.

  • {.smaller}을 슬라이드 타이틀에 적용한 경우

\[ \begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned} \]

\[    \begin{bmatrix}                 1 & x & 0 \\                 0 & 1 & -1         \end{bmatrix}\begin{bmatrix}                 1  \\                 y  \\                 1         \end{bmatrix}         =\begin{bmatrix}                 1+xy  \\                 y-1         \end{bmatrix}. \]

인라인 수식은 잘 들어갑니꽈~ \(y_i = \alpha + \beta x_i\)는 회귀방정식이란 말이요~

How to change background

Slide, aquamarine

This changes color of background!

크기 지정 벽지

This slide’s background image will be sized to 100px and repeated.

꽉찬 벽지

This slide’s background image fits the screen.

  • Font color is changed locally.

(A slide with no title)

(Another slide with no title)

How to use code

Use env

  • 코드를 실행하기 위해서는 ’환경’을 쓰는 게 좋다.
    • python의 env를 쓰든 conda env를 쓰든 필요한 것을 쓰자.
  • VS Code Extension이 아직까지 conda 환경을 제대로 지원하지 않는다.
  • 이제 잘 지원한다!
    • 문서 생성시 F1 > Python 인터프리터 선택으로 파이썬 실행 환경을 지정하자.
    • conda를 쓴다면 conda 환경을, venv를 쓰면 해당 환경을 잡아주자.
    • pixi를 쓴다면, 별도의 폴더 선택을 통해 .pixi > env > bin > python을 지정하면 된다.
  • 이 슬라이드처럼 다크 테마를 쓸 경우 그림 표시에 문제가 있을 수 있다.
    • 그림 표현 역시 다크 테마에 맞추거나 (Testing Code I)
    • 그림을 표현할 때는 적절한 밝은 테마를 쓰는 것이다. (Testing Code II)

Testing Code I

#| echo: true
#| layout: [-5, 60, -5]
#| fig-size: [10,10]
#| fig-cap: "A line plot on a polar axis"
#| cap-align: center

import numpy as np
import matplotlib.pyplot as plt
plt.style.use('dark_background')
r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={"projection": "polar"})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
  • plt.style.use('dark_background'): 다크 모드에 맞춘 스타일 설정
  • 한 턴 진행 후 아래 스크롤을 해서 결과를 확인!
Figure 1: A line plot on a polar axis

Testing Code II

#| echo: true
#| label: fig-polar-2
#| fig-cap: "A line plot on a polar axis wth customized style"

import numpy as np
import matplotlib.pyplot as plt
plt.style.use('seaborn-v0_8-white')
#plt.rcParams["figure.figsize"] = (6,6)

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={"projection": "polar"})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
  • plt.style.use('seaborn-v0_8-white'): 적절한 백색 스타일
Figure 2: A line plot on a polar axis wth customized style

End of Document

TEST FOR FOOTER!